<template>
  <div class="view">
    <div class="container box-bg">
      <div
        class="root-menu"
        :class="{ 'primary-color': !selectNode }"
        @click="reset"
      >
        系统菜单
      </div>
      <el-tree
        :data="treeData"
        :props="treeProps"
        ref="organTree"
        highlight-current
        @node-click="nodeSelect"
        :expand-on-click-node="false"
        :default-expanded-keys="expandedKeys"
        node-key="authorityId"
      >
        <span class="custom-tree-node" slot-scope="{ node, data }">
          <span
            ><i class="el-icon-set-up" v-if="data.type === 2"></i>
            {{ node.label }}</span
          >
        </span>
      </el-tree>
    </div>
    <div class="container right-table">
      <div style="margin-bottom: 10px">
        <el-button
          type="primary"
          icon="el-icon-circle-plus-outline"
          @click="handleItemAdd"
          >新增菜单
        </el-button>
        <el-button @click="handleCreateMenu" v-if="isDev"
          >批量更新菜单</el-button
        >
        <el-link style="float: right" v-show="selectNode" @click="reset"
          >返回上级</el-link
        >
      </div>
      <table-list
        :data="listData"
        :column-cfg="columnCfg"
        @refresh-list="getList"
        @edit-item="handleEditItem"
        @delete-item="handleDeleteItem"
      >
      </table-list>
      <item-detail ref="itemDetail" @data-change="getList"></item-detail>
    </div>
    <menu-auto-create
      ref="menuCreate"
      @data-change="getList"
      v-if="isDev"
    ></menu-auto-create>
  </div>
</template>

<script>
import TableList from '@/components/TableList/index';
import ItemDetail from './components/MenuDetail';
import MenuAutoCreate from './components/MenuAutoCreate';

import { list, batchDelete } from '@/api/system/authority';
import { arrayToTree } from '@/utils';

export default {
  name: 'User',
  components: {
    TableList,
    ItemDetail,
    MenuAutoCreate,
  },
  props: {},
  data() {
    return {
      treeData: [],
      selectNode: '',
      expandedKeys: [],
      viewHeight: 400,

      isDev: process.env.NODE_ENV === 'development', //仅开发环境可以批量创建菜单

      // 树形控件，树形绑定对象
      treeProps: {
        id: 'authorityId',
        label: 'authorityName',
        children: 'children',
      },

      listData: [],
      multipleSelection: [], //多选结果
      totalSize: 0, //列表记录总数
      filterParams: {}, //筛选条件，每次更新会保存使用的筛选条件
      columnCfg: {
        authorityName: { label: '菜单名称' },
        menuUrl: { label: 'URL' },
        permission: { label: '权限标识' },
        dataIndex: { label: '排序', width: '80' },
        type: { label: '类型', dictKey: 'authority_type', width: '100' },
        enable: {
          label: '机构状态',
          dictKey: 'data_status',
          tag: 'enable',
          width: '100',
        },
        description: { label: '描述' },
        ':action': {
          label: '操作',
          width: '140',
          actionArr: [
            {
              label: '编辑',
              event: 'edit-item',
              btnType: '',
            },
            {
              label: '删除',
              event: 'delete-item',
              btnType: 'danger',
            },
          ],
        },
      },
    };
  },
  computed: {},
  created() {
    this.getList();
  },
  mounted() {},
  methods: {
    /**
     * 树节点选中
     * */
    nodeSelect(data, node) {
      //非菜单类型不允许右侧选中展开右侧列表
      if (data.type === 1) {
        this.listData = data.children || [];
        this.selectNode = data;
        document.getElementById('menu_list') && (document.getElementById('menu_list').scrollTop = 0);
      }
    },

    /**
     * 点击空白处清除树节点选中
     * */
    reset() {
      this.$refs.organTree.setCurrentKey(null);
      this.listData = this.treeData;
      this.selectNode = null;
    },
    /**
     * 添加按钮
     */
    handleItemAdd() {
      this.$refs.itemDetail.show('add', this.selectNode);
    },
    /**
     * 编辑行记录
     * @param row
     */
    handleEditItem(row) {
      this.$refs.itemDetail.show('edit', row, this.selectNode);
    },

    handleCreateMenu() {
      this.$refs.menuCreate.show();
    },

    /**
     * 删除行记录
     * @param row
     */
    handleDeleteItem(row) {
      this.$confirm('此操作将永久删除该菜单, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        cancelButtonClass: 'cancel-msgbtn', confirmButtonClass: 'confirm-msgbtn', type: 'warning',
      })
        .then(() => {
          batchDelete(row.authorityId).then((res) => {
            this.$message.success('删除成功');
            this.getList();
          });
        })
        .catch(() => {});
    },

    /**
     * 获取更新表格数据
     * @param params 筛选条件
     * @param reset 是否重置筛选条件
     */
    getList(params, reset) {
      if (reset) {
        this.filterParams = params;
      } else {
        Object.assign(this.filterParams, params);
      }
      this.listData = [];
      list(this.filterParams).then((res) => {
        this.treeData = arrayToTree(res.rows, 'authorityId', 'parentId');

        if (this.selectNode) {
          this.$nextTick(() => {
            this.$refs.organTree.setCurrentKey(this.selectNode.authorityId);
            this.listData = this.$refs.organTree.getCurrentNode().children;
          });
        } else {
          this.listData = this.treeData;
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.root-menu {
  padding-left: 10px;
  line-height: 32px;
  margin-left: -10px;
  cursor: pointer;
  &:hover {
    background-color: #f5f7fa;
  }
}
.view {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  .box-bg {
    width: 230px;
    height: 100%;
    margin-right: 20px;
    background-color: #fff;
    padding: 16px 8px;
    display: flex;
    flex-direction: column;
  }
  .right-table {
    width: calc(100% - 252px);
    height: 100%;
    background-color: #fff;
    padding: 16px;
    overflow-y: auto;
    &::-webkit-scrollbar {
      /*滚动条整体样式*/
      width: 8px; /*高宽分别对应横竖滚动条的尺寸*/
      height: 4px;
    }
    &::-webkit-scrollbar-track-piece {
      background: rgba(200, 200, 200, 0.1);
    }
    &::-webkit-scrollbar-thumb {
      /*滚动条里面小方块*/
      border-radius: 8px;
      background: rgba(200, 200, 200, 0.5);
    }
  }
}
::v-deep .el-tree {
  flex: 1;
  overflow: auto;
  &::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 8px; /*高宽分别对应横竖滚动条的尺寸*/
    height: 4px;
  }
  &::-webkit-scrollbar-track-piece {
    background: rgba(200, 200, 200, 0.1);
  }
  &::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 8px;
    background: rgba(200, 200, 200, 0.5);
  }
  .el-tree-node {
    width: 100%;
    min-width: max-content;
  }
}
</style>
